import React, { Component } from 'react'
import {
    View,
    Text,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchOpacity
} from 'react-native'
import moment from 'moment';
import Toast from 'react-native-root-toast';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getDetail, initialDetail } from '../../actions/PurchaseAction';
import Loading from '../../views/loading';
import CellItem from '../../views/cellItem';
import CellTitleItem from '../../views/cellTitleItem';
import GoodItem from '../../views/goodItem';
import CellImages from '../../views/cellImages';
import Style from '../../utils/style/style';
import WXStyle from '../../utils/style/wxstyle'
class PurchaseDetail extends Component {
    constructor(props) {
        super(props)
    }
    static navigationOptions = {
        title: '采购单详情'
    }
    componentDidMount() {
        //获取销售详情
        const item = this.props.navigation.getParam("item");
        this.props.initialDetail(item);
        this._getDetail(item.PurchaseId)
    }


    _getDetail(PurchaseId) {
        let params = {
            api: "erp_plist",
            filter: "PurchaseId eq " + PurchaseId,
            select: "RecId,PurchaseId,GoodId,UnitPrice,PNumber,plist_id",
            expand: "plist_archives($expand=archives_file),plist_into($select=BarCode)"
        }
        this.props.getDetail(params);
    };
    _renderGood(item, index, length) {
        const detailList = [
            { key: '货号', value: item.Code },
            { key: '待入库存', value: item.PNumber - item.stocks ? item.PNumber - item.stocks : 0 },
            { key: '采购数量', value: item.PNumber },
            { key: '采购单价', value: item.UnitPrice / 100 }
        ]
        const noBorder = index == length - 1 ? true : false
        return (
            <GoodItem
                source={item.images[0]}
                name={item.Name}
                key={item.Name}
                showAngle={true}
                detailList={detailList}
                pressItem={() => { this._pressGoodItem(item, detailList) }}
                noBorder={noBorder}
            />
        )

    }
    _pressGoodItem(item, detailList) {
        item.detailList = detailList;
        const { PurchaseId, RecId } = this.props.data
        // if (item.PNumber - item.stocks == 0) {
        //     Toast.show("该商品已全部入库", {
        //         duration: Toast.durations.LONG,
        //         position: Toast.positions.CENTER,
        //     })
        //     return
        // }
        this.props.navigation.navigate('Warehouse', { item: JSON.stringify(item), PurchaseId: PurchaseId, RecId: RecId });
    }
    render() {
        const { data, purchasePlist } = this.props;
        const PurchaseTime = data ? moment(data.PurchaseTime).format('YYYY-MM-DD') : null;
        return (
            this.props.loading ?
                <Loading /> :
                this.props.data ?
                    <ScrollView style={styles.container}>
                        <View style={Style.gap} />
                        <CellItem title="供应商" content={data.supplier.Name} noBorder={true} />
                        <CellTitleItem title="采购商品" />
                        <View style={styles.goodList}>
                            {purchasePlist.map((item, index) => this._renderGood(item, index, purchasePlist.length))}
                        </View>
                        <View style={Style.gap} />
                        <CellItem title="采购总价" content={data.TotalPrice ? '￥' + data.TotalPrice / 100 : '￥' + 0} />
                        <CellItem title="实际收款" content={data.ActualAmount ? '￥' + data.ActualAmount / 100 : '￥' + 0} />
                        <CellItem title="欠他金额" content={data.Arrears ? '￥' + data.Arrears / 100 : '￥' + 0} />
                        <CellItem title="业务日期" content={PurchaseTime} noBorder={true} />
                        <CellTitleItem title="备注" />
                        <View style={styles.remarkView}><Text style={styles.remarks}>{data.Remarks}</Text></View>
                        <CellImages images={data.images}/>
                    </ScrollView > : null
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: Style.ViewHeightD,
        backgroundColor: '#fff',
    },

    goodList: {

    },
    remarkView: {
        height: 95,
    },
    remarks: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        paddingRight: 15,
        fontSize: 17,
        color: '#000'
    }
})
export default connect(
    state => ({
        loading: state.Purchase.loading,
        data: state.Purchase.PurchaseDetail,
        purchasePlist: state.Purchase.purchasePlist,
    }),
    dispatch => ({
        getDetail: bindActionCreators(getDetail, dispatch),
        initialDetail: bindActionCreators(initialDetail, dispatch)
    })
)(PurchaseDetail)
